<template>
    <div class="svg-icon">
        <svg :style="{width:width,height:height}">
            <use :xlink:href="prefix + name" :fill="color"></use>
        </svg>
    </div>
</template>

<script setup lang="ts">

//将props的类型移入一个单独接口
interface Props {
    prefix?:string,
    name:string,
    color?:string,
    width?:string,
    height?:string,
}
withDefaults(defineProps<Props>(),{
    prefix: () => "#icon-",
    color: () => "",
    width: () => '16px',
    height: () => '16px'
})

</script>
<script lang="ts">
export default {
    name:"SvgIcon"
}
</script>

<style lang="css">
    
</style>